<!-- 页面切换 -->
<template>
    <view class="jjhgbhxse">
        <view class="dfsgdys ov">
			<view class="dfyyeww3er">
				<scroll-view class="dx_jz h100" scroll-x :scroll-into-view="scrollInto">
					<view class="pr30">
						<view v-for="(sd,idx) in fenlei" :key="idx" :id="sd.id" @tap="qiehhas(sd,idx)" class="f_b pr20 pl20 dfgytdree" :class="sd.cls">
							{{sd.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
        <view class="fdgdreyw">
			<swiper :current="current"  class="h100" @change="swwertyx">
				<swiper-item class="h100" v-for="sd in fenlei">
					<view class="swiper-item  h100" >
						<slsx></slsx>
					</view>
				</swiper-item>
			</swiper>
		</view>
    </view>
</template>
<script>
	import slsx from "../../components/dxgj/slsx.vue"
    export default {
        data() { 
            return {
				current:0,
				scrollInto:'',
				fenlei:[
					{
						id:'fenleia',
						name:'分类A',
						cls:'act'
					},{
						id:'fenleib',
						name:'分类B',
						cls:''
					},{
						id:'fenleic',
						name:'分类C',
						cls:''
					},{
					id:'fenleid',
						name:'分类D',
						cls:''
					},{
						id:'fenleie',
						name:'分类E',
						cls:''
					},{
						id:'fenleif',
						name:'分类f',
						cls:''
					},{
						id:'fenleig',
						name:'分类g',
						cls:''
					},{
					id:'fenleih',
						name:'分类h',
						cls:''
					},{
					id:'fenleii',
						name:'分类i',
						cls:''
					}
				]
			}
        },
        components: {
			slsx
		},
        methods: {
			qiehhas(sd,idx){
				this.current = idx
			},
			swwertyx(e){
				this.fenlei.map(a=>{
					a.cls= ''
				})
				let idx = e.detail.current
				this.scrollInto = this.fenlei[idx].id
				this.fenlei[idx].cls="act"
			}
		},
        mounted() {}
    }

</script>
<style  scoped>
.jjhgbhxse {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
		/* #ifdef H5 */
			padding-top: 88rpx;
		/* #endif */
    }

    .dfsgdys {
        height: 80rpx;
		line-height: 80rpx;
		overflow: hidden;
    }
	.dfyyeww3er{
		height: 120rpx;
	}

    .fdgdreyw {
        flex: 1;
    }
	.dfgytdree.act{
		color: #009ef6;
	}
</style>
